<template>
	<view class="ex-list">
        <view class="filter-box">
            <uni-combox
                class="select-filter"
                :candidates="state_filter_list"
                placeholder="请选择"
                :border="false"
                v-model="state_cur_option"
                @change="stateChange"></uni-combox>
            <view class="search-stu">
                <input type="text" :value="search_text" @input="searchInput" placeholder="输入学生姓名/学号搜索" placeholder-style="color: #d7d7d7" />
                <image class="icon" src="/static/search.png" @click="searchExample()" mode="aspectFit"></image>
            </view>
        </view>
        <view class="ex-item" v-for="(item, i) in examineList" :key="i">
            <view class="info">
                <view class="img">
                    <image :src="api.xiaodeObsUrl+item.example.pictureUrl" mode="aspectFill"></image>
                </view>
                <view class="name-cont">
                    <view class="name-see">
                        <text class="name">{{item.example.name}}</text>
                        <text class="btn show-list-btn" @click="exampleDetails(item, i)">详情</text>
                    </view>
                    <view class="desc">
                        {{item.example.brief}}
                    </view>
                    <view class="time flex" v-if="item.id">
                        <text style="width: 72%;">{{orgGraders[item.clasId]}}<text class="t-name">{{item.name}}</text>创建于{{item.example.addTime?item.example.addTime.split(' ')[0]:''}}</text>
                    </view>
                </view>
            </view>
            <view class="examine-reason" v-if="item.example.state==5&&item.example.examineReason">
				驳回理由：{{item.example.examineReason}}
			</view>
            
        </view>
        <uni-load-more :status="load_more"></uni-load-more>
    </view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore,
		},
		data(){
			return{
				examineList: [],
				state_filter_list: {0: '全部', 1: '待审核', 2: '组长审核', 3: '已拒绝', 4: '已通过', 5: '组长拒绝'},
                search_text: '',
				state_cur_option: '待审核',
				state_cur: 1,
				orgGraders: {},
                baseInfo: {},
                stu_exam_page: 1,
                load_more: 'more'
			}
		},
        onReachBottom(){
			if(this.load_more == 'no-more') return;
			this.stu_exam_page++;
			this.getExamineExample()
		},
		onShow() {
            uni.removeStorageSync('msgExampleList')
			this.searchExample()
		},
		onLoad(){
			uni.$on('uncheckNumber', this.uncheckNumber)
			
		},
		onUnload(){
			uni.$off('uncheckNumber', this.uncheckNumber)
		},
		methods: {
			uncheckNumber(){
				if(this.state_cur==1){
					this.searchExample()
				}
			},
            searchInput(e){
				this.search_text = e.detail.value;
			},
			stateChange(index){
				if(index==0){
					this.state_cur = ''
				}else{
					this.state_cur = index
				}
				
				this.searchExample();
			},
			searchExample(){
				this.stu_exam_page = 1;
				this.examineList = [];
				this.getExamineExample()
			},
			getExamineExample(){
				this.load_more = 'loading';
				this.api.get('tExample/needExamineExample', {
					page: this.stu_exam_page,
					limit: 20,
					state: this.state_cur,
					keyWord: this.search_text
				}).then(res=>{
					uni.stopPullDownRefresh();
					if(res.data.state !='ok') return;
					
					this.baseInfo = getApp().globalData.baseInfo
					let newOrgGraders = this.baseInfo.newOrgGraders;

					for(let i=0; i<newOrgGraders.length; i++){
						Object.assign(this.orgGraders, newOrgGraders[i])
					}
					this.isData = true;
					let list = res.data.records;
					this.examineList = this.examineList.concat(list);
					if(list.length<20){
						this.load_more = 'no-more';
					}
				})
				
			},
			exampleDetails(item, index){
                uni.setStorageSync('msgExampleList', this.examineList)
				uni.navigateTo({
                    url: '/pages/teachers/example-details?stuId=' + item.id + '&index=' + index
                })
			},
		}
	}
</script>

<style lang="less">
	.ex-list{
        padding: 30rpx 32rpx 0;
        .filter-box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			height: 35px;
			margin: 0 40rpx 24rpx 24rpx;
		}
		.select-filter{
			min-width: 160rpx;
			width: auto;
			border-bottom: 2rpx solid #f2f2f2;
		}
		.search-date, .search-stu{
			border-bottom: 2rpx solid #f2f2f2;
			display: flex;
			align-items: center;
			height: 35px;
			box-sizing: border-box;
			image{
				width: 52rpx;
				height: 52rpx;
			}
		}
		.search-stu{
			input{
				width: 362rpx;
				font-size: 24rpx;
			}
		}
		.ex-item{
			margin-bottom: 20rpx;
			
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 0;
			}
			.img{
				image{
					width: 200rpx;
					height: 200rpx;
					background: #f5f5f5;
					border-radius: 8rpx;
				}
			}
			.name-see{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					color: #333;
				}
			}
			.name-cont{
				width: 67%;
				margin-left: 24rpx;
				font-size: 24rpx;
				.desc{
					margin-top: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					-webkit-box-orient: vertical;
				}
				.time{
					margin-top: 36rpx;
					color: #aaa;
					.t-name{
						color: #027DB4;
						margin: 0 8rpx;
					}
				}
			}
			.examine-reason{
				padding: 20rpx 0;
				color: #f00;
				font-size: 24rpx;
			}
		}
	}
</style>
